<template>
  <el-dialog
    v-model="dialogVisible"
    title="提交详情"
    width="60%"
    :before-close="handleClose"
    class="detail-dialog"
  >
    <div class="detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="学号">
          {{ submission ? submission.student_id : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ submission ? submission.student_name : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(submission ? submission.status : '')">
            {{ getStatusText(submission ? submission.status : '') }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="成绩">
          {{ submissionGrade }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="submission-attachments" v-if="hasAttachments">
        <h4>试卷扫描件：</h4>
        <el-card shadow="never" class="attachment-list">
          <div
            v-for="attachment in submission.attachments"
            :key="attachment.id"
            class="attachment-item"
          >
            <el-link
              :href="attachment.file_path"
              target="_blank"
              type="primary"
            >
              <i class="el-icon-document"></i>
              {{ getFileName(attachment.file_path) }}
            </el-link>
          </div>
        </el-card>
      </div>

      <div class="grading-feedback" v-if="showFeedback">
        <h4>评语：</h4>
        <el-card shadow="never" class="feedback-content">
          {{ submission.feedback || '无评语' }}
        </el-card>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  submission: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update:visible'])

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 计算属性处理可能为空的数据
const submissionGrade = computed(() => {
  if (!props.submission || props.submission.grade === null) {
    return '未评分'
  }
  return `${props.submission.grade}分`
})

const hasAttachments = computed(() => {
  return props.submission &&
         props.submission.attachments &&
         props.submission.attachments.length > 0
})

const showFeedback = computed(() => {
  return props.submission && props.submission.status === 'GRADED'
})

const getStatusType = (status) => {
  const types = {
    'SUBMITTED': 'success',
    'NOT_SUBMITTED': 'warning',
    'GRADED': 'info'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    'SUBMITTED': '已提交',
    'NOT_SUBMITTED': '未提交',
    'GRADED': '已评分'
  }
  return texts[status] || '未知状态'
}

const getFileName = (path) => {
  if (!path) return ''
  return path.split('/').pop()
}

const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.detail-content {
  padding: 20px;
}

.submission-attachments {
  margin: 20px 0;
}

.grading-feedback {
  margin: 20px 0;
}

.attachment-list, .feedback-content {
  background-color: #f8f9fa;
}

.attachment-item {
  padding: 8px;
  border-bottom: 1px solid #ebeef5;
}

.attachment-item:last-child {
  border-bottom: none;
}
</style>